// import React from 'react'
import { useState, useEffect } from 'react'
import { Button, Input, Space, Dropdown } from 'antd';
import { SearchOutlined, CameraOutlined, DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Carousel } from 'antd';
import { Solar, Lunar } from 'lunar-javascript';
// import { options, swiperNev } from '../../data/Tool';

// 日历弹框
import type { BadgeProps, CalendarProps } from 'antd';
import { Badge, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';

// 搜索选择框数据 
function HomeSearch(props: any) {
    let [dropdown, setDropdown] = useState('全部')
    const items: MenuProps['items'] = props.options.map((item: any) => (
        {
            key: item.value,
            label: (
                <span onClick={() => {
                    headleDropdown(item.value);
                }}>
                    {item.label}
                </span>
            )
        }
    ))

    const headleDropdown = (value: string) => {
        setDropdown(value)
    }
    let [rotate, setRotate] = useState(false)
    const headleOpenChange = (e: boolean) => {
        setRotate(e)
    }
    // 日历 
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    const day = currentDate.getDate();
// 
    var d = Lunar.fromDate(new Date());//获取农历日期
    let lunarMoth = d.getMonthInChinese();//获取中文 月
    let lunarDay = d.getDayInChinese();//获取中文 日
    let week = d.getWeekInChinese();//获取中文 周


    let o = Solar.fromYmd(year, month, day);
    var l = o.getFestivals();//获取国内国际节日
    let [festivals, setFestivals] = useState('幸运日')
    useEffect(() => {
        for (var i = 0, j = l.length; i < j; i++) {
            if (l.length) {
                setFestivals(l[i])
            }
        }
    }, [])
    // 竖轮播样式 
    const contentStyle: React.CSSProperties = {
        margin: 0,
        height: '32px',
        color: '#fff',
        lineHeight: '32px',
        background: '#fff',
        border: '1px solid #ccc',
        width: '70px'
    };

    // 日历弹框 
    const [userInfoShow, setUserInfoShow] = useState(0)
    const headleUserInfoOver = () => {
        setUserInfoShow(450)
    }
    const headleUserInfoOut = () => {
        setUserInfoShow(0)
    }
    const getListData = (value: Dayjs) => {
        let listData;
        switch (value.date()) {
            case 8:
                listData = [
                    { type: 'warning', content: 'This is warning event.' },
                    { type: 'success', content: 'This is usual event.' },
                ];
                break;
            case 10:
                listData = [
                    { type: 'warning', content: 'This is warning event.' },
                    { type: 'success', content: 'This is usual event.' },
                    { type: 'error', content: 'This is error event.' },
                ];
                break;
            case 15:
                listData = [
                    { type: 'warning', content: 'This is warning event' },
                    { type: 'success', content: 'This is very long usual event......' },
                    { type: 'error', content: 'This is error event 1.' },
                    { type: 'error', content: 'This is error event 2.' },
                    { type: 'error', content: 'This is error event 3.' },
                    { type: 'error', content: 'This is error event 4.' },
                ];
                break;
            default:
        }
        return listData || [];
    };

    const getMonthData = (value: Dayjs) => {
        if (value.month() === 8) {
            return 1394;
        }
    };
    const monthCellRender = (value: Dayjs) => {
        const num = getMonthData(value);
        return num ? (
            <div className="notes-month">
                <section>{num}</section>
                <span>Backlog number</span>
            </div>
        ) : null;
    };

    const dateCellRender = (value: Dayjs) => {
        const listData = getListData(value);
        return (
            <ul className="events">
                {listData.map((item) => (
                    <li key={item.content}>
                        <Badge status={item.type as BadgeProps['status']} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    };

    const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
        if (info.type === 'date') return dateCellRender(current);
        if (info.type === 'month') return monthCellRender(current);
        return info.originNode;
    };

    return (
        <div className='search_top'>
            {/* 左图 */}
            <img src="../../public/image1/free.webp" alt="" />
            {/* 搜索框  */}
            <div className='search_search'>
                <Space.Compact style={{ width: '100%' }}>
                    <Dropdown onOpenChange={headleOpenChange} menu={{ items }} placement='bottom'>
                        <Button style={{ width: '80px', display: 'flex', alignItems: 'center' }}>
                            <b>{dropdown}</b>&nbsp;<DownOutlined style={{
                                fontSize: '10px',
                                transition: 'transform 0.3s ease', transform: rotate ? 'rotate(180deg)' : 'rotate(0deg)'
                            }} />
                        </Button>
                    </Dropdown>

                    {/* 搜索框竖轮播 */}
                    <button style={{ width: '80%', height: '32px', border: '1px solid #ccc', display: 'flex', justifyContent: 'space-between', color: '#ccc' }}>
                        <Carousel dotPosition="left" dots={false} autoplaySpeed={2000} autoplay={true} style={{ paddingLeft: '1px', width: '80px', height: '30px' }}>
                            {
                                props.swiperNev.map((item: any) => (
                                    <p key={item}>{item.title}</p>
                                ))

                            }

                        </Carousel>
                        <CameraOutlined style={{ lineHeight: '30px', marginTop: '6px', paddingRight: '4px', fontSize: '20px', color: '#ccc' }} />
                    </button>
                    <Button type='primary'><SearchOutlined style={{ fontWeight: 'bold', fontSize: '20px' }} /></Button>
                </Space.Compact>
                <ul>
                    <span>邀请函</span>
                    <span>游戏</span>
                    <span>抽奖</span>
                    <span>端午节</span>
                    <span>招聘</span>
                    <span>百日宴邀请函</span>
                    <span>节日邀请函</span>
                </ul>
            </div>
            {/* 日历 */}
            <div className='search_right' style={{
                display: 'flex', width: '260px', height: '80px', padding: '10px',
                border: '1px solid #ccc', alignItems: 'center',
                justifyContent: 'space-around',
                cursor: 'pointer', borderRadius: '5px'
            }} onMouseOver={headleUserInfoOver} onMouseOut={headleUserInfoOut}>
                <div >
                    <b><span style={{ fontSize: '23px' }}>{day}</span>/{month}&nbsp;&nbsp;{year}</b>
                    <p style={{ fontSize: '12px', color: '#969696' }}> 周{week}&nbsp;农历{lunarMoth}月{lunarDay}</p>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img style={{ width: '25px', height: '25px' }} src="../public/image1/节日.png" alt="" /><b>{festivals}</b>
                </div>

            </div>
            {/* 日历弹框  */}
            <div style={{
                height: `${userInfoShow}px`, overflow: 'hidden',
                width: '800px', background: '#fff', zIndex: 999999,
                position: 'absolute', right: '28px', marginTop: '80px'
            }}>

                <Calendar cellRender={cellRender} />;

            </div>

        </div>
    )
}

export default HomeSearch
